<template>
	<z-paging
		ref="paging"
		:refresher-out-rate="0.8"
		:show-empty-view-reload-when-error="false"
		:empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
		empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-error-text="暂无数据"
		safe-area-inset-bottom
		bg-color="#FAFAFA"
		v-model="dataList"
		@query="queryList"
	>
		<view class="u-page">
			<view class="tabsBox flex_wrap">
				<view
					class="flex_wrap flex_column"
					v-for="(item, i) in list1"
					:key="i"
					@click="changeTabs(i)"
					:class="{ activeBg: tabsIndex === i }"
				>
					<u-icon
						size="24"
						labelPos="bottom"
						:label="item.name"
						labelSize="24rpx"
						:labelColor="tabsIndex === i ? '#fff' : '#3D3D3D'"
						space="6"
						:name="tabsIndex === i ? item.activeBg : item.icon"
					></u-icon>
					<view
						class="triangle"
						v-show="tabsIndex === i"
					></view>
				</view>
			</view>
			<view v-if="tabsIndex === 1">
				<view v-if="bannerList.length">
					<view class="weatWrap flex_wrap row_between-column_center">
						<u-text
							text="产品海报"
							color="#3D3D3D"
							size="36rpx"
							bold
						/>
						<u-text
							text="更多"
							color="#333"
							size="28rpx"
							align="right"
							suffixIcon="arrow-right"
							iconStyle="fontSize:30rpx;lineHeight:38rpx;color:#333333"
							@click="goto"
						/>
					</view>

					<u-scroll-list
						:indicator="false"
						indicatorColor="#fff0f0"
						indicatorActiveColor="#f56c6c"
						:customStyle="{ padding: '0 36rpx' }"
					>
						<view
							v-for="(item, index) in bannerList"
							:key="index"
						>
							<image
								:src="item"
								@click="more_counselling(item)"
								mode="widthFix"
								style="width: 158rpx; height: auto; margin-right: 20rpx"
							></image>
						</view>
					</u-scroll-list>
				</view>
				<view class="weatWrap flex_wrap row_between-column_center">
					<u-text
						text="图解产品"
						color="#3D3D3D"
						size="36rpx"
						bold
					/>
				</view>

				<view
					class="u-demo-block"
					v-for="item in dataList"
					:key="item.id"
				>
					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__avatar">
								<image
									src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/16/7fab9966118946a5904ab3c664b50210.png"
									mode=""
									style="width: 32px; height: 32px"
								></image>
							</view>
							<view class="album__content">
								<u--text
									text="十蜂健康"
									type="primary"
									bold
									size="17"
								></u--text>
								<u--text
									margin="0 0 8px 0"
									:text="item.videoIntro"
									@click="goToDetail(item)"
								></u--text>
								<u-album
									v-if="item.videoCover"
									:urls="item.videoCover"
									multipleSize="90"
									albumWidth
								></u-album>
							</view>
						</view>
					</view>
					<view class="shareWrap flex_wrap row_between-column_center">
						<view v-if="item.infoDetail">
							<text>{{ formatMsgTime(item.infoDetail.shareTime) }}</text>
							<text>{{ item.infoDetail.postName }}</text>
							<text>{{ item.infoDetail.salesmanName }}</text>
							<text>分享过</text>
						</view>
						<view
							v-else
							style="width: 50%"
						></view>
						<view>
							<u-button
								type="primary"
								text="一键获客"
								shape="circle"
								size="small"
								color="#3c9cff"
								@click="shareFun(item)"
							></u-button>
						</view>
					</view>
					<u-gap
						height="4"
						bgColor="#eee"
					></u-gap>
				</view>
			</view>
			<view
				class="enterprise_details"
				v-else-if="tabsIndex === 0"
			>
				<view class="weatWrap flex_wrap row_between-column_center">
					<u-text
						text="产品视频"
						color="#3D3D3D"
						size="36rpx"
						bold
					/>
				</view>
				<view class="news">
					<view
						class="news_list"
						v-for="(item, index) in dataList"
						:key="index"
						@click="goPageDetail(item)"
					>
						<view class="news_detail flex_wrap row_between">
							<u-image
								height="152rpx"
								width="274rpx"
								:src="item.videoCover"
								mode="aspectFill"
								radius="16rpx"
							/>
							<view>
								{{ item.videoIntro || item.videoIntro }}
							</view>
							<view class="box">
								<view class="iconBox"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="weatWrap flex_wrap row_between-column_center">
					<u-text
						text="产品课件"
						color="#3D3D3D"
						size="36rpx"
						bold
					/>
				</view>
				<view class="itemsBox">
					<!--    label="world" -->
					<u-cell
						v-for="item in dataList"
						:isLink="true"
						:icon="getIconFun(item)"
						@click="goTo(item)"
						:title="item.videoName"
						:border="false"
						:iconStyle="{ width: '76rpx', height: '76rpx' }"
						:titleStyle="{ fontWeight: 'bold' }"
						:customStyle="{
							background: '#fff',
							color: '#333333',
							fontSize: '28rpx',
							height: '122rpx',
							margin: '10rpx 0',
							borderRadius: '20rpx'
						}"
					></u-cell>
				</view>
			</view>
		</view>
		<u-popup
			:show="showShare"
			mode="bottom"
			@close="showShare = false"
			@open="showShare = true"
			closeOnClickOverlay
			:closeable="true"
			@touchmove.stop.prevent="() => {}"
		>
			<view class="shareBox flex_wrap">
				<view
					class="flex_wrap flex_column itemBox"
					@click="downloadImgsFun"
				>
					<u-icon
						name="download"
						size="50"
						labelPos="bottom"
						space="10"
					/>
					<view>下载</view>
				</view>
				<view class="flex_wrap flex_column itemBox">
					<button
						open-type="share"
						style="background: transparent"
					>
						<u-icon
							name="/static/images/card/weixin.png"
							size="50"
							labelPos="bottom"
							space="10"
						/>
						<view>微信好友</view>
					</button>
				</view>
			</view>
		</u-popup>
	</z-paging>
</template>

<script>
	import { baseUrl } from "@/config/tendIdConfig"
	import { checkHowManyMoreCustomersThanLastWeek, getCustomersWithOneClick } from "@/api/operate"
	import { mapGetters } from "vuex"
	import { wxSaveAuth, downloadImgs } from "@/utils/index"
	let shareItem = {}
	let goodsId = ""
	export default {
		data() {
			return {
				tabsIndex: 0,
				albumWidth: 0,
				list1: [
					{
						name: "视频资料",
						icon: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/16/a1c06c0afac9446385de22330e89c93e.png",
						activeBg: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/16/f0bd5dbc496f402f80c54b3275fd9d81.png"
					},
					{
						name: "营销资料",
						icon: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/16/6d7efabf64894e52bfa23b2a8318da98.png",
						activeBg: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/16/f93be3a8a5214162ad51f846daf2453b.png"
					},

					{
						name: "其他资料",
						icon: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/16/703f1c12eb884f3c8e8afb87dfc9c841.png",
						activeBg: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/16/9cb1c7c4588b47f98d76e11c209a6ee8.png"
					}
				],
				bannerList: [],
				courseList: [],
				showShare: false,
				dataList: []
			}
		},
		onShow() {
			// this.$refs.paging.reload();
		},
		computed: {
			...mapGetters(["userInfo"]),
			getIconFun() {
				return (item) => {
					if (item && item.videoName) {
						const name = item.videoName
						const ext = name.substring(name.lastIndexOf(".") + 1)
						console.log("item :>> ", ext)
						if (["doc", "docx"].includes(ext)) return "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/16/4bfdc2d0fd224951964b74eb69131f4b.png"
						if (["xlsx"].includes(ext)) return "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/20/42731be249d347af9b19e99558d4ce4c.png"
						if (["ppt", "pptx"].includes(ext)) return "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/20/3d3b455fe0594de584b117a41f1c0cc2.png"
						if (["pdf"].includes(ext)) return "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/16/f21bd6f41cc54a36969f198bec3581ce.png"
					}
				}
			}
		},
		onLoad(o) {
			uni.hideShareMenu()
			goodsId = o.goodsId
		},
		onShareAppMessage(res) {
			this.getCustomersWithOneClickFun()
			return {
				title: "十蜂健康资讯",
				desc: "",
				path: "/pages_operate/detail/index?id=" + shareItem.id,
				imageUrl: shareItem.videoCover[0]
			}
		},
		methods: {
			changeTabs(i) {
				this.tabsIndex = i
				this.$refs.paging.reload()
			},
			getList(pageNum, pageSize, recordType) {
				uni.showLoading({
					title: "加载中"
				})
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this
				uni.request({
					url: baseUrl + "/customer/video_info_customer/pageVideo",
					method: "POST",
					header: {
						Authorization: token
					},
					data: {
						pageNum,
						pageSize,
						recordType,
						goodsId
					},
					success(res) {
						if ([991, 992, 401].includes(res.data.code)) {
							uni.$u.toast(res.data.msg)
							that.$store.commit("SET_LOGOUT")
							uni.navigateTo({
								url: "/pages/user/phone/indexApp"
							})
							return
						}
						const result = res.data.data?.rows ?? []
						if (recordType === 3) return (that.bannerList = result.map((v) => v.videoCover))
						if (recordType === 2) {
							result.forEach((element) => {
								element.videoCover = element.videoCover.split(",")
								element.infoDetail && (element.infoDetail = JSON.parse(element.infoDetail))
							})
						}
						uni.hideLoading()
						that.$refs.paging.complete(result)
					}
				})
			},
			goTo(item) {
				this.$u.route({
					url: "/pages_shop1/information/download",
					params: {
						fileUrl: item.videoUrl,
						fileName: item.videoName
					}
				})
			},
			click(item) {},
			shareFun(item) {
				this.showShare = true
				shareItem = item
			},
			// 下载
			async downloadImgsFun() {
				const urls = shareItem.videoCover
				// 获取保存到相册权限
				wxSaveAuth().then(async (res) => {
					// 保存多张图片到相册
					await downloadImgs(urls)
					wx.showToast({
						title: "正在复制文案",
						duration: 3000
					})
					uni.setClipboardData({
						data: shareItem.videoIntro,
						success() {
							uni.showToast({
								title: "复制成功"
							})
						},
						fail() {
							uni.showToast({
								title: "复制失败"
							})
						}
					})
					this.getCustomersWithOneClickFun()
				})
			},
			// 一键获客
			getCustomersWithOneClickFun() {
				getCustomersWithOneClick({
					salesmanId: this.$store.getters?.userInfo.id,
					winTheCustomerId: shareItem.id
				})
			},
			more_counselling(item) {
				uni.navigateTo({
					url: `/pages_operate/poster/index?image=${item}`
				})
			},
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages_operate/detail/index?id=${item.id}`
				})
			},
			goPage() {
				uni.navigateTo({
					url: "/pages_operate/userdata/index"
				})
			},
			goto() {
				uni.navigateTo({
					url: "/pages_operate/morePoster/index?goodsId=" + goodsId
				})
			},
			goPageDetail(item) {
				uni.navigateTo({
					url: `/pages_video/videoNew/index?clickId=${item.id}`
				})
			},
			queryList(pageNum, pageSize) {
				// 海报 recordType 3
				this.tabsIndex === 1 && this.getList(1, 6, 3)
				// 新闻推荐 recordType 2
				this.tabsIndex === 1 && this.getList(pageNum, pageSize, 2)
				// 产品视频
				this.tabsIndex === 0 && this.getList(pageNum, pageSize, 0)
				// 其他资料
				this.tabsIndex === 2 && this.getList(pageNum, pageSize, 7)
			},
			formatMsgTime(timespan) {
				var dateTime = new Date(timespan) // 将传进来的字符串或者毫秒转为标准时间
				var year = dateTime.getFullYear()
				var month = dateTime.getMonth() + 1
				var day = dateTime.getDate()
				var hour = dateTime.getHours()
				var minute = dateTime.getMinutes()
				// var second = dateTime.getSeconds()
				var millisecond = dateTime.getTime() // 将当前编辑的时间转换为毫秒
				var now = new Date() // 获取本机当前的时间
				var nowNew = now.getTime() // 将本机的时间转换为毫秒
				var milliseconds = 0
				var timeSpanStr
				milliseconds = nowNew - millisecond
				if (milliseconds <= 1000 * 60 * 1) {
					// 小于一分钟展示为刚刚
					timeSpanStr = "刚刚"
				} else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
					// 大于一分钟小于一小时展示为分钟
					timeSpanStr = Math.round(milliseconds / (1000 * 60)) + "分钟前"
				} else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) {
					// 大于一小时小于一天展示为小时
					timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + "小时前"
				} else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 15) {
					// 大于一天小于十五天展示位天
					timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + "天前"
				} else if (milliseconds > 1000 * 60 * 60 * 24 * 15 && year === now.getFullYear()) {
					timeSpanStr = month + "-" + day + " " + hour + ":" + minute
				} else {
					timeSpanStr = year + "-" + month + "-" + day + " " + hour + ":" + minute
				}
				return timeSpanStr
			}
		}
	}
</script>
<style lang="scss" scoped>
	.u-page {
		box-sizing: border-box;
		background-color: #fafafa;
		.tabsBox {
			background-color: #fff;
			padding: 32rpx 40rpx;
			justify-content: space-around;
			view {
				width: 200rpx;
				height: 120rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				background: #f7f7f7;
				padding-top: 18rpx;
			}
			.activeBg {
				background: #1682ff;
				color: #fff;
				position: relative;
			}
			.triangle {
				width: 0;
				height: 0;
				background-color: #fff;
				border-top: 20rpx solid #1682ff;
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				position: absolute;
				bottom: -32rpx;
				left: 42%;
			}
		}
	}

	.weatWrap {
		padding: 0 36rpx;
		margin-bottom: 40rpx;
		margin-top: 20rpx;
	}

	.bannerWrap {
		padding: 36rpx;
		box-sizing: border-box;
		display: flex;
		overflow-x: scroll;
	}

	.album {
		@include flex;
		align-items: flex-start;
		padding-top: 30rpx;
		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.u-demo-block__content {
		padding: 0 36rpx 0 36rpx;
	}

	.shareWrap {
		padding-left: 100rpx;
		box-sizing: border-box;
		margin: 10rpx;
		padding-right: 40rpx;

		text {
			margin: 10rpx 5rpx;
			margin: 0rpx 10rpx 20rpx 0;
			font-size: 24rpx;
			color: #666666;
		}
	}

	.shareBox {
		// height: 220rpx;
		padding-bottom: 220rpx;
		.itemBox {
			flex: 1;
			justify-content: center;
			align-items: center;
			padding-top: 50rpx;
			view {
				font-size: 28rpx;
				color: #3d3d3d;
				margin-top: 10rpx;
			}
		}
	}
	.enterprise_details {
		padding: 32rpx 28rpx;
	}
	.enterprise_top {
		display: flex;
		font-size: 32rpx;
		color: #3d3d3d;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.enterprise_bg {
		display: block;
		width: 12rpx;
		height: 12rpx;
		background: #588bf3;
		margin-right: 18rpx;
		border-radius: 50%;
	}

	.news {
		height: auto;
		overflow: hidden;
	}

	.news_list {
		display: flex;
		position: relative;
		flex-direction: row;
	}

	.news_detail {
		padding: 24rpx 0 3rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
		view {
			padding-left: 30rpx;
			// width: 100%;
			box-sizing: border-box;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;
			font-size: 32rpx;
			color: #3d3d3d;
			line-height: 54rpx;
		}
		.box {
			width: 274rpx;
			height: 152rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: absolute;
			top: 24rpx;
			left: 0;
			background: rgba(0, 0, 0, 0.2);
			.iconBox {
				width: 76rpx;
				height: 76rpx;
				background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/26/9213c9113ad34df6b80ecda7346dd543.png);
				background-size: contain;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.itemsBox {
		padding: 10rpx 32rpx;
	}
</style>
